﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Treegrid - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/tree/jeasyui.extensions.tree.dataPlain.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/treegrid/jeasyui.extensions.treegrid.dataPlain.js"></script>
    <script>
    $(function () {
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({ field: 'ID', title: '主键', width: 100 });
            c1.push({ field: 'Sex1', title: '男', width: 90 });
            c1.push({ field: 'Sex2', title: '女', width: 90 });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 }
            ];
            result.push(normal);

            return result;
        };
        var options = {
            title: "列表",
            idField: "ID",
            treeField: "AreaName",
            rownumbers: true,
            fit: true,
            border: false,
            singleSelect: true,
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "treegrid-dataplain-data.json",
            dataPlain: true,
            parentField: "PID",
            loadFilter: function (data, parent) {
                return data.rows1;
            }
        };

        $("#tg1").treegrid(options);
    });
    </script>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',title:'演示说明',border:false" style="padding:15px;height:120px;">
            通过重写源生的 loadFilter 属性来实现对平滑数据的自动层级解析。
            为了不影响自定义的 loadFilter 属性，以动态追加的方式完成扩展功能的实现。
            <br />
            <br />
            json文件中，数据源对象的属性名是 rows1 ，而 treegrid 只能识别 rows，因此需要用 loadFilter 进行调整。
            <br />
            以此测试“自定义的 loadFilter 属性”并未受到影响。
        </div>
        <div data-options="region:'center',border:false" style="border-top-width:1px;">
            <table id="tg1"></table>
        </div>
    </div>
</body>
</html>
